<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <base href="http://localhost/back/">

    <link href="http://localhost/front/css/style.css" rel="stylesheet" type="text/css" />
    <link href="http://localhost/front/css/shopping-mall-index.css" rel="stylesheet" type="text/css" />
    <link href="css/H-ui.min.css" rel="stylesheet" type="text/css"/>
    <link href="css/H-ui.admin.css" rel="stylesheet" type="text/css"/>
    <link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css"/>
    <link href="lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="lib/icheck/jquery.icheck.min.js"></script>
    <script type="text/javascript" src="lib/Validform/5.3.2/Validform.min.js"></script>
    <script type="text/javascript" src="lib/layer/1.9.3/layer.js"></script>
    <script type="text/javascript" src="js/H-ui.js"></script>
    <script type="text/javascript" src="js/H-ui.admin.js"></script>
    <script type="text/javascript" src="js/jigsaw.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/ajaxUtils.js" charset="utf-8"></script>
</head>

<body>

<!--top 开始-->
<div class="top">
    <div class="top-con w1200">
        <p class="t-con-l f-l">您好，欢迎来到宅客微购</p>
        <ul class="t-con-r f-r">
            <li><a href="#">我 (个人中心)</a></li>
            <li><a href="#">我的购物车</a></li>
            <li><a href="#">我的订单</a></li>
            <li class="erweima">
                <a href="#">扫描二维码</a>
                <div class="ewm-tu">
<!--                    <a href="#"><img src="images/erweima-tu.jpg"/></a>-->
                </div>
            </li>
            <div style="clear:both;"></div>
        </ul>
        <div style="clear:both;"></div>
    </div>
</div>


<div class="pd-20">
    <form action="http://www.jd.com" method="post" class="form form-horizontal" id="form-admin-add">
        <div class="row cl">
            <label class="form-label col-5"><span class="c-red">*</span>用户名：</label>
            <div class="formControls col-2">
                <input type="text" placeholder="输入用户名" id="username" name="username" value="" ajaxurl="http://localhost/auth/check"
                       class="input-text" datatype="*2-16" nullmsg="用户名不能为空">
            </div>
            <div class="col-4"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-5"><span class="c-red">*</span>密码：</label>
            <div class="formControls col-2">
                <input type="password" placeholder="请输入密码" name="password" autocomplete="off" value=""
                       class="input-text" datatype="*3-10" nullmsg="密码不能为空">
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-5"><span class="c-red">*</span>确认密码：</label>
            <div class="formControls col-2">
                <input type="password" placeholder="再次输入密码" recheck="password" autocomplete="off" value=""
                       class="input-text" datatype="*" nullmsg="密码不能为空">
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-5"><span class="c-red">*</span>手机号：</label>
            <div class="formControls col-2">
                <input type="text" placeholder="请输入手机号" id="phone" name="phone" value=""
                       class="input-text" datatype="m" nullmsg="手机号不能为空">
            </div>
            <div class="formControls col-1">
                <input class="btn btn-primary radius" id="sendCodeBut" type="button"
                        value="&nbsp;&nbsp;获取验证码&nbsp;&nbsp;" >
            </div>
            <div class="col-3"></div>
        </div>
        <div></div>
        <div class="row cl">
            <label class="form-label col-5"><span class="c-red">*</span>验证码：</label>
            <div class="formControls col-1">
                <input type="text" placeholder="" id="code" name="code"  value=""
                       class="input-text" datatype="n" nullmsg="验证码不能为空">
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-5"><span class="c-red">*</span>邮箱：</label>
            <div class="formControls col-2">
                <input type="text"  placeholder="@" name="email" id="email" value="854569279@qq.com" ajaxurl="http://localhost/auth/check"
                       class="input-text"  datatype="e" nullmsg="请输入邮箱！">
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-5"><span class="c-red"></span></label>
            <div class="formControls col-2" id="captcha"></div>
            <div class="col-4"></div>
        </div>


        <div class="row cl">
            <div class="col-9 col-offset-5">
                <input class="btn btn-primary radius" id="user-register-but" style="display: none" type="submit"
                       value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</div>

<script type="text/javascript">

    //手机验证码定时器设置的方法
    var t = 60;
    function time(but) {
        but.val("验证码已发送(" + t + ")s");
        //定时器
        var timeInter = setInterval(function () {
            t--;
            if (t < 0) {
                // 把发送验证码按钮取消禁用
                but.val("点击这里重新获取");
                but.prop("disabled",false);
                t = 60; // 把时间回复称60s
                clearInterval(timeInter); // 删除定时器
                return false;
            }
            but.val("验证码已发送(" + t + ")s");
        }, 1000) //间隔时间为1秒
    }

    //手机验证码发送到后台的方法
    function callSendMobile(phone){
        $.ajax({
            url:"http://localhost/auth/sendPhoneCode/"+phone,
            method:"GET",
            success:function(resp){

            }
        });
    }


    //主加载
    $(function () {
        // 手机验证码按钮的绑定事件
        $("#sendCodeBut").click(function () {
            console.log("点击而来发送验证码的按钮")
            // 1.禁用按钮
            $(this).prop("disabled", true); // prop是attr升级版

            // 2、异步调用后台接口给用户手机发送验证码
            callSendMobile($("#phone").val());

            // 3.开始倒计时
            time($(this));
        });

        // 初始化滑动验证码
        jigsaw.init({
            el: document.getElementById('captcha'),
            onSuccess: function() {
                $("#user-register-but").css("display","");
            },
            onFail: cleanMsg,
            onRefresh: cleanMsg
        })
        function cleanMsg() {
            $("#user-register-but").css("display","none");
        }

        //表单提交
        $("#form-admin-add").Validform({
            tiptype: 2,
            callback: function (form) { // 表单全部校验成功后回调
                // 1.序列化表单数据
                console.log("表单数据",form)
                var array = form.serializeArray();
                // 2.准备一个对象
                var param = new Object();
                // 3.把数组中的name和value全部添加param对象中
                for(var i =0;i<array.length;i++){
                    var name = array[i].name; // username
                    var value = array[i].value; // admin
                    param[name] = value ; // param.username="admin"
                }
                console.log(param);
                // 3.数据发送给后台
                post("http://localhost/auth/register",param,function(resp){
                    console.log("后台响应",resp);
                    layer.msg("注册成功", {icon: 1,time:1000},function(){
                        location.href = "http://localhost/auth/loginUser.html"
                    });

                });
                return false; // 返回false表单自动不会提交，我们要的是异步提交
            }
        });

    });
</script>


<!--底部服务-->
<div class="ft-service">
    <div class="w1200">
        <div class="sv-con-l2 f-l">
            <dl>
                <dt><a href="#">新手上路</a></dt>
                <dd>
                    <a href="#">购物流程</a>
                    <a href="#">在线支付</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">配送方式</a></dt>
                <dd>
                    <a href="#">货到付款区域</a>
                    <a href="#">配送费标准</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">购物指南</a></dt>
                <dd>
                    <a href="#">常见问题</a>
                    <a href="#">订购流程</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">售后服务</a></dt>
                <dd>
                    <a href="#">售后服务保障</a>
                    <a href="#">退款说明</a>
                    <a href="#">新手选购商品总则</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">关于我们</a></dt>
                <dd>
                    <a href="#">投诉与建议</a>
                </dd>
            </dl>
            <div style="clear:both;"></div>
        </div>
        <div class="sv-con-r2 f-r">
            <p class="sv-r-tle">187-8660-5539</p>
            <p>周一至周五9:00-17:30</p>
            <p>（仅收市话费）</p>
            <a href="#" class="zxkf">24小时在线客服</a>
        </div>
        <div style="clear:both;"></div>
    </div>
</div>

<!--底部 版权-->
<div class="footer w1200">
    <p>
        <a href="#">关于我们</a><span>|</span>
        <a href="#">友情链接</a><span>|</span>
        <a href="#">宅客微购社区</a><span>|</span>
        <a href="#">诚征英才</a><span>|</span>
        <a href="#">商家登录</a><span>|</span>
        <a href="#">供应商登录</a><span>|</span>
        <a href="#">热门搜索</a><span>|</span>
        <a href="#">宅客微购新品</a><span>|</span>
        <a href="#">开放平台</a>
    </p>
    <p>
        沪ICP备13044278号<span>|</span>合字B1.B2-20130004<span>|</span>营业执照<span>|</span>互联网药品信息服务资格证<span>|</span>互联网药品交易服务资格证
    </p>
</div>

</body>
</html>